/*
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-09-05 
 */


import { defineComponent, getCurrentInstance, inject, onUpdated, reactive, Transition, watch } from 'vue'
import './css/CarItem.scss'
export default defineComponent({
  name: 'CarItem',
  setup(props, { emit, slots }) {
    const instace = getCurrentInstance();
    const state = reactive({
      selfIndex: instace.vnode.key,
      currentIndex: 0
    });
    watch(() => instace.parent.ctx.initial, news => {
      state.currentIndex = news
    });

    const parentCtx = inject('ctx');

    watch(() => parentCtx.getCurrentIndex(), news => {
      state.currentIndex = news;
    });
    function renderDom() {
      const { selfIndex, currentIndex } = state;
      const node = <div class='car-item'> { slots.default?.() }</div>
      return selfIndex === currentIndex ? node : null;
    }
    return () => {
      return (
        <Transition>
          { renderDom() }
        </Transition>
      )
    }
  }
})
